<template>
	<div class="bg-white">
		<div class="shadow rounded overflow-hidden">
			<div class="bg-main p-2">
				<span>房间信息</span>
			</div>
			<div :style="'background-image:url('+room.cover+');'" class="position-relative">
				<div style="background-color: rgba(255,255,255, 0.6);" class="w-100 h-100">
					<Row class="">
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-f-fuguang rounded  p-2">
							<div class="text-xs">房间</div>
							<div>{{room.rname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">面积</div>
							<div>{{room.mj}}㎡</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">容纳人数</div>
							<div>{{room.rnrs}}人</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">瑜伽垫数</div>
							<div>{{room.yjds}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded  p-2">
							<div class="text-xs">所属店铺</div>
							<div>{{astore.sname}}</div>
						</div>
						</Col>
						<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
						<div class="bg-qingbai rounded p-2">
							<Carousel loop>
								<CarouselItem v-for="(img, index) in room.imgs" :key="index">
									<img class="w-100 h-100" :src="img" />
								</CarouselItem>
							</Carousel>
						</div>
						</Col>
					</Row>
				</div>
			</div>
		</div>
		
		
		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>房间时段价格</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(roomhourprice,index) in roomhourprice" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>编号</span>
							<span>{{roomhourprice.hid}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>价格</span>
							<span>{{roomhourprice.price}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>开始时间</span>
							<span>{{roomhourprice.st}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>结束时间</span>
							<span>{{roomhourprice.et}}</span>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>
		
		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>门禁信息</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(mj,index) in mjs" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
						<div class="d-flex justify-content-between">
							<span>类型</span>
							<span v-if="mj.flg">出门</span>
							<span v-else>进门</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>型号</span>
							<span>{{mj.modelnumber}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>UID</span>
							<span>{{mj.uid}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>UKEY</span>
							<span>{{mj.ukey}}</span>
						</div>
					</div>
					</Col>
				</Row>
			</div>
		</div>
		
		<div class="shadow rounded overflow-hidden mt-3">
			<div class="bg-main p-2">
				<span>预约记录</span>
			</div>
			<div>
				<Row class="">
					<Col v-for="(yyjl,index) in yyjl" :key="index"
					class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
					<div class="shadow rounded p-2">
				
						<div class="d-flex justify-content-between">
							<span>编号</span>
							<span>{{yyjl.rmorderid}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>金额</span>
							<span>{{yyjl.amont}}</span>
						</div>
						<div class="d-flex justify-content-between">
							<span>记录创建时间</span>
							<span>{{yyjl.ct}}</span>
						</div>
					</div>
					</Col>
				</Row>
			</div>
			<div>
				<Page class="text-right mt-3" :page-size="pageSize" @on-change="pageSearch"
					:total="total" />
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
			room: {},
			roomhourprice:[],
			mjs:[],
			currentPage: 1,
			pageSize: 6,
			total: 0,
			yyjl:[],
            astore:{},
			}
		},
		created: function() {
			this.room.roomid = this.$route.query.id;
			this.loadData();
		},
		mounted: function() {},
		methods: {
			loadData: function() {
				return this.http.get({
					url: "/room/info",
					param: {
						roomid: this.room.roomid
					}
				}).then(res => {
					console.log(res)
					this.room = res.room;
					this.roomhourprice=res.aroomhourlyprices
					this.mjs=res.amenjins
					this.yyjl=res.aroomyyjls
					this.astore=res.astore
				});
			},
			pageSearch: function(changedPage) {
				this.currentPage = changedPage;
				this.search();
			},
		}
	}
</script>

<style>
</style>